<template>
	<div class="login">
		<header>
			<i class="fas fa-angle-left" @click="goBack" />
			<span>登录注册</span>
			<i class="fas fa-ellipsis-h" />
		</header>
		<section>
			<form action="">
				<input class="login-tel" type="text" v-model="userTel" placeholder="输入手机号" pattern="[0-9]*" />
				<input class="login-pwd" type="text" v-model="userPwd" placeholder="输入密码" />
				<button class="btn">登录</button>
			</form>
			<div class="tab">
				<span>修改密码</span>
				<span>快速注册</span>
			</div>
		</section>

	</div>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';
	let router = useRouter()
	// 点击返回
	const goBack = () => {
		router.back()
	}
</script>

<style scoped>
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
		color: white;
		padding: 10px;
		background-color: #ff6976;
	}
	section{
		background-color: white;
		font-size: 18px;
		padding: 40px 20px;
	}
	input{
		width: 100%;
		height: 40px;
		border: 1px solid #999;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 20px;
		box-sizing: border-box;
	}
	.btn{
		width: 100%;
		height: 40px;
		color: white;
		font-weight: bold;
		text-align: center;
		background-color: #ff6976;
		border: 0;
		border-radius: 5px;
		margin-bottom: 20px;
	}
	.tab{
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}
</style>